"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/3
 */
import * as React from 'react'

const {View, ScrollView, FlatList, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
import {commonProps, commonStyles} from "../../assets/styles/common";
import MyText from "../../component/MyText";
import NavBackButton from "../../component/BackButton";
import Colors from "../../assets/styles/Colors";
import Line from "../../component/Line";
import MyIcon from "../../component/icon";
import {supportList} from "../../assets/data";
import {PlacePage} from "../../interface/router";
import {openUrl} from "../../utils/tools";
import {commentStyles} from "../../assets/styles/guide";
import T from "../../utils/T";

class SupportPage extends React.Component<PlacePage, any> {

    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            firstName: null,
            lastName: null,
            date: new Date()
        };
    }

    componentDidMount(): void {
        this.props.dispatch({type: 'place/fetchQuestionTypeList'});
    }

    textProps = {
        color: Colors.White,
        fontSize: 25,
        style: {marginBottom: 10}

    };


    renderItem = ({item}) => {
        const questionType: questionTypeItem = item;
        return (
            <TouchableOpacity onPress={Actions.supportReport.bind(null, {supportItem: item})}>
                <View style={[commonStyles.flexRow, commonStyles.listItem, {
                    backgroundColor: Colors.White,
                    justifyContent: 'space-between',
                    padding: 15
                }]}>
                    <MyText color={Colors.Brief}>{item.name}</MyText>
                    {/*<Image source={require('../../assets/image/returnRight.png')}/>*/}
                    <MyIcon name={'icon-iconfontyoujiantou'} color={Colors.Active}/>
                </View>
                <Line color={Colors.Background}/>
            </TouchableOpacity>
        )
    };

    renderListFooterComponent = () => {
        return (
            <View style={{backgroundColor: Colors.Clear}}>
                <TouchableOpacity style={[commonStyles.centerVH, {padding: 15}]}>
                    <MyText>{T('Need help now')+'?'}</MyText>
                </TouchableOpacity>
                <View style={[{paddingLeft: 15, paddingRight: 15, paddingBottom: 15}]}>
                    <TouchableOpacity onPress={openUrl.bind(null, 'tel:123456',false)}>
                        <View style={[commonStyles.centerVH, {backgroundColor: Colors.Active, paddingVertical: 15}]}>
                            <MyText color={Colors.White}>{T('Call us right away')}</MyText>
                        </View>
                    </TouchableOpacity>
                </View>
                <Line color={Colors.Background}/>
            </View>
        )
    };
    renderListHeaderComponent = () => {
        return (
            <View style={[commonStyles.relative, {padding: 15, backgroundColor: Colors.White}]}>
                <MyText color={Colors.Title}>我们可以提供什么帮助?</MyText>
                <Line color={Colors.Background} style={[commonStyles.absolute, {bottom: 0}]}/>
            </View>
        )
    };

    renderListEmptyComponent = () => {
        return (
            <View style={[commonStyles.centerVH,{padding:20}]}>
                <MyText fontSize={16} color={Colors.Title}>暂无数据</MyText>
            </View>
        )
    };

    render() {

        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: '支持', tintColor: '#fff'}}
                />
                <View style={commonStyles.flex1}>
                    <FlatList data={this.props.place.questionTypeList ? this.props.place.questionTypeList.content : []}
                              extraData={this.state}
                              keyExtractor={item => item.id}
                              renderItem={this.renderItem}
                              ListEmptyComponent={this.renderListEmptyComponent}
                              ListHeaderComponent={this.renderListHeaderComponent}
                              ListFooterComponent={this.renderListFooterComponent}/>
                </View>
            </View>
        );
    }
}

export default connect(
    ({auth, place}) => ({auth, place})
)(SupportPage);